<template>
  <div class="login">
    sb的年龄: {{ age }}

    {{ myAge }}
    {{ youAge() }}
    <div v-for="item in strs" :key="item">{{ item }}</div>

    <a-button type="primary" style="width: 100px" @click="change"
      >change</a-button
    >
    <a-button type="primary" style="width: 100px" @click="$router.push('/home')"
      >登录</a-button
    >
  </div>
</template>
<script >
import { reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  data() {
    return {
      name: "sb",
      strs: ["s1", "s2", "s3"],
    };
  },
  methods: {
    change() {
      this.name = "我改变了";
      this.age = 20;
    },
    youAge() {
      return `你的年龄是${this.age + 4}`;
    },
    // goHome() {
    //   this.$router.push("/home");
    // },
  },
  computed: {
    myAge() {
      return `我的年龄是${this.age + 3}`;
    },
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      name: "sb3",
      age: 18,
    });

    const change = () => {
      state.age++;
    };
    const myAge = computed(() => {
      return `我的年龄是${state.age + 10}`;
    });
    const goHome = () => {
      router.push({ name: "Home" });
    };

    return { state, ...toRefs(state), change, myAge, goHome };
  },
};
</script>
<style lang="less" scoped>
.login {
  display: flex;
  flex-direction: column;
}
</style>
